<template>
  <div class="index">
    <!-- 头部 -->
    <div class="n-header">
        <div class="logo">
            <a href="">
                <img src="../assets/authlogin/logo.png" alt="" />
            </a>
        </div>
    </div>
    <!-- 头部 -->
    <!-- banner -->
    <!-- banner -->
    <!-- 内容 -->
    <div class="main">
        <div class="g-boxl1">
            <div class="wp">
                <div class="pic">
                    <img src="../assets/authlogin/imgl1.png" alt="" />
                </div>
                <div class="right">
                    <div class="m-register">
                        <div class="logo-top">
                            <img src="../assets/authlogin/logo.png" alt="" />
                        </div>
                        <ul class="ul-listl1 TAB_CLICK" id=".table1">
                            <li :class="{'on':loginType==0}"  @click="loginType=0"><a class="con">浙政钉登录</a></li>
                            <li  :class="{'on':loginType==1}"  @click="loginType=1"><a href="JavaScript:;" class="con">账号登录</a></li>
                            <!-- <li><a href="JavaScript:;" class="con">浙里办登录</a></li> -->
                        </ul>
                        <div class="table1" v-if="loginType==0">
                            <div class="m-form l1">
                                <div class="form l1">
                                    <form action="">
                                        <div class="qr">
                                            <img src="../assets/authlogin/imgl2.jpg" alt="" />
                                        </div>
                                        <input type="submit" class="btn" value="登录" />
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="table1" v-if="loginType==1">
                            <div class="m-form">
                                <div class="form">
                                    <form action="">
                                        <div class="item">
                                            <input type="text" class="inp" placeholder="请输入账号" />
                                        </div>
                                        <div class="item last">
                                            <input type="password" class="inp" placeholder="请输入密码" />
                                        </div>
                                        <a href="" class="sign">浙里办登录</a>
                                        <input type="submit" class="btn" value="登录" />
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="table1 dn">
                    <div class="m-form">
                        <div class="form">
                            <form action="">
                                <div class="item">
                                    <input type="text" class="inp" placeholder="请输入账号"/>
                                </div>
                                <div class="item">
                                    <input type="password" class="inp" placeholder="请输入密码"/>
                                </div>
                                <input type="submit" class="btn" value="登录" />
                            </form>
                        </div>
                    </div>
                </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <!-- 底部 -->
    <div class="footer">
        <div class="wp">
            <div class="copy">沪IP备 38472956</div>
        </div>
    </div>
    <!-- 底部 -->
  </div>
</template>
<script>
export default {
  data(){
    return {
      loginType:0
    }
  }
}
</script>

<style lang="scss">
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
abbr,acronym,fieldset,img{border:0}
ol,ul{list-style:none}
caption,th{text-align:left}
q:after,q:before{content:''}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.col-c,.col-l,.col_c,.col_l,.l{float:left}
.col-r,.col_r,.r,.ul-txt li span,.ul_txt li span,dt span{float:right}
.c{clear:both}
.n,em{font-weight:400;font-style:normal}
.b{font-weight:700}
.i{font-style:italic}
.fa{font-family:Arial}
.fg{font-family:Georgia}
.ft{font-family:Tahoma}
.fl{font-family:Lucida Console}
.fs{font-family:'宋体'}
.fw{font-family:'微软雅黑'}
.tc{text-align:center}
.tr{text-align:right}
.tl{text-align:left}
.tdu{text-decoration:underline}
.tdn,.tdn:hover,a.tdl:hover{text-decoration:none}
.fc0{color:#000}
.fc3{color:#333}
.fc6{color:#666}
.fc9{color:#999}
.fcr{color:red}
.fcw{color:#fff}
.fcb{color:#00f}
.fcg{color:green}
.f0{font-size:0}
.f10{font-size:10px}
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.f24{font-size:24px}
.vm{vertical-align:middle}
.vtb{vertical-align:text-bottom}
.vt{vertical-align:top}
.vn{vertical-align:-2px}
.vimg{margin-bottom:-3px}
.m0{margin:0}
.ml0{margin-left:0}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.mr0{margin-right:0}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.ml-1{margin-left:-1px}
.mt-1{margin-top:-1px}
.p1{padding:1px}
.pl5{padding-left:5px}
.p5{padding:5px}
.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pb5{padding-bottom:5px}
.p10{padding:10px}
.pl10{padding-left:10px}
.pt10{padding-top:10px}
.pr10{padding-right:10px}
.pb10{padding-bottom:10px}
.p20{padding:20px}
.pl20{padding-left:20px}
.pt20{padding-top:20px}
.pr20{padding-right:20px}
.pb20{padding-bottom:20px}
.pr,.rel{position:relative}
.abs,.pa{position:absolute}
.dn{display:none}
.db{display:block}
.dib{-moz-inline-stack:inline-block;display:inline-block}
.di{display:inline}
.ovh{overflow:hidden}
.ovs{overflow:scroll}
.vh{visibility:hidden}
.vv{visibility:visible}
.lh14{line-height:14px}
.lh16{line-height:16px}
.lh18{line-height:18px}
.lh20{line-height:20px}
.lh22{line-height:22px}
.lh24{line-height:24px}
.fix{*zoom:1}
.fix:after,.fix:before{display:block;content:"clear";height:0;clear:both;overflow:hidden;visibility:hidden}
.z{_zoom:1}
.h1{height:1px}
.h5{height:5px}
.h,.h10{height:10px}
.h15{height:15px}
.h20{height:20px}
.h,.h1,.h10,.h15,.h20,.h5{font-size:0;line-height:0;overflow:hidden;clear:both}
body{font:12px "微软雅黑","Microsoft Yahei";color:#444;min-width:1440px;background-color:#c6ebfd;overflow-x:hidden;overflow-y:auto}
a{text-decoration:none;color:#444}
a:hover{color:#134268}
.ani,img{transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s}
input,select,textarea{font-size:12px;color:#444;font-family:"微软雅黑","Microsoft Yahei"}
button,input[type=button],input[type=reset],input[type=submit],select{-webkit-appearance:none;-moz-appearance:none;appearance:none}
button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer}
::-webkit-input-placeholder{color:#a3a9b2}
::-moz-placeholder{color:#a3a9b2}
::-ms-input-placeholder{color:#a3a9b2}
select::-ms-expand{display:none}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none}
.wp{width:1116px;margin:0 auto}
.h50{height:50px;clear:both;overflow:hidden}
.h100{height:100px;clear:both;overflow:hidden}
*{outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}
.logo{height:110px;line-height:110px;float:left;font-size:0;overflow:hidden}
.logo a{display:block}
.logo img{display:inline-block;vertical-align:middle;height:72px}
.footer{position:fixed;left:0;width:100%;bottom:0;z-index:20;background-color:#4e5a74}
.footer .copy{font-size:14px;font-weight:400;color:#fff;line-height:62px;text-align:center;overflow:hidden}
.index{position:relative}
.g-boxl1{overflow:hidden;padding:267px 0 100px;min-height:100vh;background:url(../assets/authlogin//bgl1.jpg) center bottom no-repeat #c6ebfd;-webkit-background-size:100% auto;-moz-background-size:100% auto;-ms-background-size:100% auto;-o-background-size:100% auto;background-size:100% auto}
.g-boxl1 .pic{width:493px;height:auto;float:left;overflow:hidden;margin-top:15px}
.g-boxl1 .pic img{display:block;width:100%}
.g-boxl1 .right{float:right}
.m-register{width:440px;padding:40px 40px 47px;background:#fff;-webkit-box-shadow:0 2px 30px 0 rgba(0,0,0,.15);-moz-box-shadow:0 2px 30px 0 rgba(0,0,0,.15);-ms-box-shadow:0 2px 30px 0 rgba(0,0,0,.15);-o-box-shadow:0 2px 30px 0 rgba(0,0,0,.15);box-shadow:0 2px 30px 0 rgba(0,0,0,.15);overflow:hidden}
.m-register .logo-top{width:272px;height:auto;overflow:hidden;margin-bottom:45px}
.m-register .logo-top img{display:block;width:100%}
.ul-listl1{overflow:hidden}
.ul-listl1 li{float:left;margin-right:30px}
.ul-listl1 .con{display:block;font-size:18px;font-weight:600;color:#4d5055;line-height:1.39em;overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s;position:relative;padding-bottom:8px}
.ul-listl1 .con:after{content:'';position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);width:46px;height:2px;background:#0c7ebb;display:none}
.ul-listl1 .con:hover,.ul-listl1 li.on .con{color:#0c7ebb}
.ul-listl1 .con:hover:after,.ul-listl1 li.on .con:after{display:block}
.m-form{overflow:hidden;margin-top:40px}
.m-form .item{overflow:hidden;margin-bottom:35px}
.m-form .item.last{margin-bottom:20px}
.m-form .inp{display:block;width:100%;height:46px;border:none;border-bottom:1px solid silver;font-size:14px;font-weight:400;color:#4d5055;line-height:20px}
.m-form .sign{display:block;font-size:14px;color:#0c7ebb;line-height:1.43em;text-align:center;overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}
.m-form .sign:hover{text-decoration:underline}
.m-form .btn{display:block;overflow:hidden;text-align:center;width:100%;line-height:46px;height:46px;background:#0c7ebb;font-size:18px;font-weight:600;color:#fff;border:none;margin-top:14px}
.m-form .form .qr{width:202px;height:202px;margin:0 auto;overflow:hidden}
.m-form .form .qr img{display:block;width:100%}
.m-form.l1{margin-top:10px}
.m-form.l1 .form .btn{margin-top:9px}


.n-header{background-color:#fff;position:fixed;top:0;left:0;width:100%;z-index:20;padding:0 392px}
@media only screen and (max-width:1920px){
.n-header{padding:0 20.41667vw}
}
</style>